<!-- input 组件 -->
<template>
  <div>
    <label :for="options.type" ref="parent">
      <input type="text"  value="" :id="options.type" :placeholder="options.type" v-model="value" @blur="verify">
      <div>
        <a v-if="options.isShow" href="javascript:;" @click="getVerify">获取验证码</a>
        <span v-if="isTimerShow">剩余{{timer}}s</span>
        <slot></slot>
      </div>
    </label>
  </div>
</template>

<script>
export default {
  props: ['options'],
  data () {
    return {
      value: '',
      verifyValue: '',
      timer: 0,
      isTimerShow: false
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
  },
  methods: {
    verify () {
      const reg = this.options.reg
      this.value = this.value.trim()
      if (reg.test(this.value)) {
        // 验证通过
        this.$refs.parent.style.border = '1px solid #ddd'
        this.$emit('phoneVal', this.value)
        this.verifyValue = this.value
      } else {
        // 验证失败
        this.$refs.parent.style.border = '1px solid #ef475d'
      }
    },
    getVerify () {
      if (this.verifyValue !== '') {
        console.log('发射')
        this.options.isShow = false
        this.isTimerShow = true
        this.timer = 60
        // 倒计时
        const clearTimer = setInterval(() => {
          this.timer--
          if (this.timer === 0) {
            clearInterval(clearTimer)
            this.options.isShow = true
            this.isTimerShow = false
          }
        }, 1000)
        // 开始发射吧。发射获取验证码
        this.$store.dispatch('getLoginVerify', { phoneNumber: this.verifyValue })
      }
    }
  }
}
</script>
<style lang='stylus' scoped>
/* @import url(); 引入css类 */
label
  width: 100%;
  height: 50px;
  display: flex;
  background-color: #ffffff;
  aling-items center
  justify-content center
  border 1px solid #ddd
  span
   line-height 50px;
   font-size 16px;
   padding-right 7px;
  input
   width 50%
   background-color transparent
   background none
   display block
   outline none
  div
   width 100px;
   a
    line-height 50px;
    display block
    padding-left 5px;
    color #000

</style>
